import React, {Component} from 'react';
import {createBottomTabNavigator} from 'react-navigation';
import Ionicons from 'react-native-vector-icons/Ionicons'; //图标
import FontAwesome from "react-native-vector-icons/FontAwesome";
import {BottomTabBar} from 'react-navigation-tabs';//@0.8.4  下载最新版本会导致报错
// 初始化页面
import HomePage from '../page/home/App';
import MyPage from '../page/my/App';
import CreditCard from '../page/creditcard/App';
// 方法
import NavigationUtil from './NavigationUtil';
// 高级函数 -- 连接当前组件和redux
import {connect} from 'react-redux';
class DynamicTabsNatigator extends Component {
    constructor(props){
        super(props);
        console.disableYellowBox = true;//关闭黄色提示框
    }
    _tabNavigeter(){
        if(this.tureTabs){
            return this.tureTabs;
        }
        let {HomePage,CreditCard,MyPage} = TABS;
        HomePage.navigationOptions.tabBarLabel = '首页';//动态修改底部导航名字
        let tabs = {HomePage,CreditCard,MyPage}; //根据需要配置需要的底部导航；
        return this.tureTabs = createBottomTabNavigator(tabs,{
            tabBarComponent:props => {
                return <TabBarComponent theme={this.props.theme} {...props}/>
            }}
        );
    }
    render() {
        NavigationUtil.navigation = this.props.navigation;//
        const Tab = this._tabNavigeter(); //0.58版本必须用createAppContainer不包裹会出现报错
        return <Tab/>;
    }
};

class TabBarComponent extends React.Component{
    constructor(props){
        super(props);
    }
    render(){
        return <BottomTabBar
            {...this.props}
            activeTintColor={this.props.theme} //-----使用redux改变的颜色
        />
    }
}
// 底部导航条
const TABS = {
    HomePage : {
        screen:HomePage,
        navigationOptions:{
            header: null,
            tabBarLabel: 'Home',
            tabBarIcon: ({tintColor, focused}) => (
                <Ionicons
                    name={'md-home'}
                    size={26}
                    style={{color: tintColor}}
                />
            ),
        }
    },
    CreditCard:{
        screen:CreditCard,
        navigationOptions:{
            header:null,
            tabBarLabel:'信用卡',
            tabBarIcon:({tintColor,focused})=>(
                <FontAwesome
                    name={'credit-card'}
                    size={26}
                    style={{color:tintColor}}
                />
            )
        }
    },
    MyPage : {
        screen:MyPage,
        navigationOptions:{
            header: null,
            tabBarLabel: '我的',
            tabBarIcon: ({tintColor, focused}) => {
                return  <FontAwesome
                    name={'user'}
                    size={26}
                    style={{color: tintColor}}
                />
            },
        }
    },
}

const mapStateToProps = state => ({
    theme: state.theme.theme,
});

export default connect(mapStateToProps)(DynamicTabsNatigator)